package com.xsy.android.compose.we.component.ui.page.contacts

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.xsy.android.compose.we.component.R
import com.xsy.android.compose.we.component.data.User
import com.xsy.android.compose.we.component.ui.compose.WeTopBar
import com.xsy.android.compose.we.component.ui.theme.WeComposeTheme
import com.xsy.android.compose.we.component.view_model.WeViewModel

/**
 *@author: xiaosy
 *时间: 2024/6/26
 *@Description: java类作用描述
 *@Version: 1.0
 **/
@Composable
fun ContactsList(modifier: Modifier = Modifier) {
    val viewModel: WeViewModel = viewModel()
    Column(modifier = modifier.fillMaxSize()) {
        WeTopBar(title = "通讯录")
        Box(
            modifier = Modifier
                .background(WeComposeTheme.colors.background)
                .fillMaxSize()
        ) {
            ContactList(viewModel.contacts)
        }

    }
}

@Composable
fun ContactList(contacts: List<User>) {
    LazyColumn(
        modifier = Modifier
            .background(WeComposeTheme.colors.listItem)
            .fillMaxWidth()
    ) {
        val buttons = listOf(
            User("contact_add", "新的朋友", R.drawable.ic_contact_add),
            User("contact_chat", "仅聊天", R.drawable.ic_contact_chat),
            User("contact_group", "群聊", R.drawable.ic_contact_group),
            User("contact_tag", "标签", R.drawable.ic_contact_tag),
            User("contact_official", "公众号", R.drawable.ic_contact_official),
        )
        itemsIndexed(buttons) { index, contact ->
            ContactListItem(contact = contact)
            if (index < buttons.lastIndex) {
                HorizontalDivider(
                    modifier = Modifier.padding(start = 56.dp),
                    thickness = 0.8f.dp,
                    color = WeComposeTheme.colors.chatListDivider
                )
            }
        }
        item {
            Text(
                text = "朋友", modifier =
                Modifier
                    .background(WeComposeTheme.colors.background)
                    .fillMaxWidth()
                    .padding(12.dp, 8.dp),
                fontSize = 14.sp,
                color = WeComposeTheme.colors.onBackground
            )
        }
        itemsIndexed(contacts) { index, contact ->
            ContactListItem(contact = contact)
            if (index < buttons.lastIndex) {
                HorizontalDivider(
                    modifier = Modifier.padding(start = 56.dp),
                    thickness = 0.8f.dp,
                    color = WeComposeTheme.colors.chatListDivider
                )
            }
        }
    }
}


@Composable
fun ContactListItem(contact: User) {
    Row(modifier = Modifier.fillMaxWidth()) {
        Image(
            painter = painterResource(id = contact.avatar),
            contentDescription = "avatar",
            modifier = Modifier
                .padding(12.dp, 8.dp, 8.dp, 8.dp)
                .size(36.dp)
                .clip(RoundedCornerShape(4.dp))
        )

        Text(
            text = contact.name,
            modifier = Modifier
                .weight(1f)
                .align(Alignment.CenterVertically),
            fontSize = 18.sp,
            color = WeComposeTheme.colors.textPrimary
        )
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewContactListItem() {
    ContactListItem(User("contact_add", "新的朋友", R.drawable.ic_contact_add))
}


@Preview(showBackground = true)
@Composable
fun PreviewContactsList() {
    ContactsList()
}